<template>
  <div class="btn">
    <el-button type="primary" icon="Promotion" @click="sendNotice">一键发布</el-button>
  </div>
  <el-input v-model="textarea" :rows="5" type="textarea" placeholder="请输入公告内容" />
  <div class="table">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="公告内容" width="1200px">
        <template #default="scope">
          <div class="text">{{ scope.row.content }}</div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200px">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑 </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="dialog" v-for="(item, index) in tableData" :key="item['id']">
    <el-dialog v-model="item['isEdit']" title="公告内容">
      <el-input v-model="item['content']" :rows="8" type="textarea" placeholder="请输入公告内容" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel(index)">取消</el-button>
          <el-button type="primary" @click="updateNotice(item)">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
  <el-dialog v-model="isDelete" title="Tips" width="30%">
    <span>是否确认删除此公告</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isDelete = false">取消</el-button>
        <el-button type="primary" @click="deleteNotice">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { nanoid } from 'nanoid'
import { ElMessage, rowContextKey } from 'element-plus'
import userApi from '@/api/user'

const textarea = ref('')

let tableData = ref([])
function getNoticeContent() {
  userApi.getNoticePage().then((res: any) => {
    tableData.value = res
    if (tableData.value.length) {
      tableData.value.forEach((item: { [x: string]: boolean }) => {
        item['isEdit'] = false
      })
    }
  })
}

getNoticeContent()

// 编辑
const handleEdit = (index: number, row: any) => {
  row.isEdit = true
}
// 提交更新
const updateNotice = (formData: any) => {
  const sendFormData = {
    content: formData.content,
    id: formData.id,
  }
  userApi.updateNotice(sendFormData).then((res: any) => {
    ElMessage({
      showClose: true,
      message: res,
      type: 'success',
    })
    getNoticeContent()
  })
}
// 删除
const isDelete = ref(false)
let notice_id = ref(0)
const handleDelete = (index: number, row: any) => {
  isDelete.value = true
  notice_id.value = row.id
  console.log(notice_id.value)
}
const deleteNotice = () => {
  console.log(notice_id.value)
  if (notice_id.value) {
    userApi.deleteNotice(notice_id.value).then((res: any) => {
      ElMessage({
        showClose: true,
        message: res,
        type: 'success',
      })
      isDelete.value = false
      getNoticeContent()
    }).catch(() => {
      ElMessage({
        showClose: true,
        message: '公告删除失败',
        type: 'error',
      })
    })
  }
}

const isSend = ref(true)

// 发布
let nano_id = nanoid();
function sendNotice() {
  if (isSend && textarea.value && textarea.value.trim()) {
    isSend.value = false
    userApi.saveNotice({ content: textarea.value.trim() }).then((res: any) => {
      isSend.value = true
      ElMessage({
        showClose: true,
        message: res,
        type: 'success'
      })
      getNoticeContent()
    }).catch(() => {
      ElMessage({
        showClose: true,
        message: '公告发布失败',
        type: 'error'
      })
    })
  }
}

const cancel = (index: string | number) => {
  tableData.value[index]['isEdit'] = false
}

</script>
<style>
.el-table__inner-wrapper::before {
  z-index: 1 !important;
}
</style>

<style lang="scss" scoped>
::v-deep.el-table__inner-wrapper::before {
  z-index: 1 !important;
}

.btn {
  text-align: right;
  margin-bottom: 10px;
}

.table {
  margin-top: 10px;

  .text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>